<template>
    <div class="layout">
        <Layout>
            <Header class="header">入口</Header>
            <Content class="container-xy">
                <Row type="flex" class="custom-flex" :gutter="40">
                    <Col
                        :span="6"
                        v-for="item in listRender"
                        :key="item.path"
                        style="margin-bottom:10px;"
                    >
                        <div class="wrap-grid">
                            <div class="grid-content">
                                <div class="item-pic">
                                    <img :src="item.img" />
                                </div>
                                <p class="item-desc">{{item.text}}</p>
                                <Row class="item-operate">
                                    <Col :span="8">
                                        <span class="btn" @click="goPath(item)">预览</span>
                                    </Col>
                                    <Col :span="8">
                                        <span class="btn">查看源码</span>
                                    </Col>
                                    <Col :span="8">
                                        <span class="btn">下载模板</span>
                                    </Col>
                                </Row>
                            </div>
                            <div class="grid-bg"></div>
                        </div>
                    </Col>
                </Row>
            </Content>
        </Layout>
        <!-- <canvasViews class="canvas"></canvasViews> -->
    </div>
</template>
<script>
import canvasViews from "./../qiu";
import JSZip from "jszip";
import FileSaver from "file-saver";
export default {
    data() {
        return {
            list: [
                {
                    img: "https://dummyimage.com/300x150/efefef&text=封面",
                    text: "qq表情",
                    path: "/qq",
                    permission: "own",
                },
                {
                    img: "https://dummyimage.com/300x150/efefef&text=封面",
                    text: "大文件传输",
                    path: "/bigFile",
                    permission: "own",
                },
                {
                    img: "https://dummyimage.com/300x150/efefef&text=封面",
                    text: "地图案例",
                    path: "/mapView",
                },
                {
                    img: "https://dummyimage.com/300x150/efefef&text=封面",
                    text: "生成二维码、条形码",
                    path: "/qrCode",
                },
                {
                    img: "https://dummyimage.com/300x150/efefef&text=封面",
                    text: "权限按钮配置",
                    path: "/permission",
                    permission: "own",
                },
                {
                    img: "https://dummyimage.com/300x150/efefef&text=封面",
                    text: "爬虫",
                    path: "/bug",
                    permission: "own",
                },
                {
                    img: "https://dummyimage.com/300x150/efefef&text=封面",
                    text: "reduce技巧",
                    path: "/reduce",
                    permission: "own",
                },
                {
                    img: "https://dummyimage.com/300x150/efefef&text=封面",
                    text: "动态读取文件展示",
                    path: "/requireContext",
                    permission: "own",
                },
                {
                    img: "https://dummyimage.com/300x150/efefef&text=封面",
                    text: "svg动态颜色切换",
                    path: "/svg",
                    permission: "own",
                },
                {
                    img: "https://dummyimage.com/300x150/efefef&text=封面",
                    text: "在线编辑代码vuep",
                    path: "/codeMirror",
                    permission: "own",
                },
                {
                    img: "https://dummyimage.com/300x150/efefef&text=封面",
                    text: "在线编辑代码",
                    path: "/codeMirror2",
                },
                {
                    text: "百度编辑",
                    path: "/ueditor",
                    permission: "own",
                },
                {
                    img: "https://dummyimage.com/300x150/efefef&text=封面",
                    text: "quill编辑",
                    path: "/quill",
                },
                {
                    img: "https://dummyimage.com/300x150/efefef&text=封面",
                    text: "canvas实现气泡",
                    path: "/qiu",
                    permission: "own",
                },
                {
                    img: "https://dummyimage.com/300x150/efefef&text=封面",
                    text: "轮播图",
                    path: "/slider",
                    permission: "own",
                },
                {
                    img: "https://dummyimage.com/300x150/efefef&text=封面",
                    text: "数字滚动",
                    path: "/num",
                },
                {
                    img: "https://dummyimage.com/300x150/efefef&text=封面",
                    text: "柱状图",
                    path: "/bars",
                },
                {
                    img: "https://dummyimage.com/300x150/efefef&text=封面",
                    text: "折线图",
                    path: "/lines",
                },
                {
                    img: "https://dummyimage.com/300x150/efefef&text=封面",
                    text: "上传按钮",
                    path: "/uploadView",
                },
                {
                    img: "https://dummyimage.com/300x150/efefef&text=封面",
                    text: "表格",
                    path: "/table",
                },
                {
                    img: "https://dummyimage.com/300x150/efefef&text=封面",
                    text: "UI",
                    type: "outLink",
                    path: "http://10.5.19.221:9000/#/packages",
                },
                {
                    img: "https://dummyimage.com/300x150/efefef&text=封面",
                    text: "是否退出本页面",
                    path: "/backView",
                    //permission: "own",
                },
                {
                    img: "https://dummyimage.com/300x150/efefef&text=封面",
                    text: "tree-select改造",
                    path: "/treeSelect"
                },
            ],
        };
    },
    computed: {
        listRender() {
            let data = this.list.filter((item) => {
                return item.permission != "own";
            });
            return data;
        },
    },
    mounted() {
        const zip = new JSZip();
    },
    methods: {
        filterWatch(data) {
            console.log(data);
            return data;
        },
        goPath(item) {
            if (item.type == "outLink") {
                window.open(item.path)
            } else {
                this.$router.push({
                    path: item.path,
                });
            }
        },
    },
    components: {
        canvasViews,
    },
};
</script>
<style scoped lang="scss">
.header {
    color: $--color-primary;
}
.grid-content {
}
</style>
<style lang="less" scoped>
.layout{
    background-color: #00051D;
}
.canvas {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}
.header {
    font-size: 32px;
    color: @colorText;
    text-align: center;
}
.custom-flex {
    flex-wrap: wrap;
}

// .wrap-grid {
//     position: relative;
//     transition: all 0.5s linear;
//     transform-style: preserve-3d;
// }

// .grid-bg {
//     width: 100%;
//     height: 100%;
//     position: absolute;
//     top: 0;
//     left: 0;
// }
// .before {
//     background: red;
// }
// .grid-bg {
//     background: #fff;
//     transform: rotateX(-180deg);
// }
// .wrap-grid:hover {
//     transform: rotateX(180deg);
// }
</style>